<template>
    <view style="padding-top: 60px;">

        <view class="a-cell">
            <view class="a-cell-label">layer.error('')</view>
            <view class="a-cell-value">
                <button type="button" @click="error">测试</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-label">layer.success('')</view>
            <view class="a-cell-value">
                <button type="button" @click="success">测试</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-label">layer.warning('')</view>
            <view class="a-cell-value">
                <button type="button" @click="warning">测试</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-label">layer.toast('')</view>
            <view class="a-cell-value">
                <button type="button" @click="toast">测试</button>
            </view>
        </view>

        <view class="a-cell">
            <view class="a-cell-label">layer.loading('')</view>
            <view class="a-cell-value">
                <button type="button" @click="showLoading">显示</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-label">layer.alert('')</view>
            <view class="a-cell-value">
                <button type="button" @click="alert">显示</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-label">this.$alert('')</view>
            <view class="a-cell-value">
                <button type="button" @click="alert2">显示</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-label">this.$notice('')</view>
            <view class="a-cell-value">
                <button type="button" @click="notice">显示</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-label">this.confirm('')</view>
            <view class="a-cell-value">
                <button type="button" @click="confirm">显示</button>
            </view>
        </view>
        <view class="a-cell">
            <view class="a-cell-label">this.$prompt('')</view>
            <view class="a-cell-value">
                <button type="button" @click="prompt">显示</button>
            </view>
        </view>

        <my-confirm v-model="confirmVisible" :msg="confirmMsg" @confirm="confirmCallback"
                    :title="confirmTitle" :confirm-input="confirmInput"></my-confirm>
        <my-toptip ref="toptip"></my-toptip>
    </view>
</template>

<script>
    import Layer from '@/tpl/layer'
    import {layer} from "../../utils/index";

    export default {
        mixins: [Layer],
        data() {
            return {}
        },
        created() {
        },
        methods: {
            alert() {
                layer.alert('这里是错误信息').then(() => {
                    console.log('enter');
                })
            },
            alert2() {
                this.$alert('错误提示').then(() => {
                    console.log('执行回调');
                });
            },
            notice() {
                this.$notice('这里是提示信息').then(() => {
                    console.log('执行回调');
                });
            },
            confirm() {
                /*
                this.$confirm('这里是错误信息', () => {
                    console.log('enter');
                });

                 */
                this.$confirm('这里是错误信息', '温馨提示').then(() => {
                    console.log('确定回调',);
                });
            },
            error() {
                this.$toptip('错误提示');
            },
            success() {
                layer.success('成功提示');
            },
            warning() {
                this.$warning('警告');
            },
            toast() {
                layer.toast('操作成功').then(() => {
                    console.log('ok');
                });
            },
            prompt() {
                /*
                this.$prompt('请输入您的姓名', (promptInput) => {
                    layer.notice('您输入的是' + promptInput);
                });
                 */

                this.$prompt('请输入您的姓名').then((promptInput) => {
                    layer.notice('您输入的是' + promptInput);
                });

            },
            doCallback() {
                this.callback();
            },
            showLoading() {
                layer.loading('数据加载中');
                setTimeout(() => {
                    layer.hideLoading();
                }, 3000);
            }
        }
    }
</script>

<style scoped>

</style>
